<template>
  <div class="container">
    <div class="top">公共服务</div>
    <el-row class="contain">
      <el-col :span="12">
        <el-card class="box-card">
          <el-table :data="serviceList.activity" style="width: 100%">
            <el-table-column label="活动参展">
              <el-table-column prop="level" label="级别系数" width></el-table-column>
              <el-table-column prop="total_people" label="参与人数" width></el-table-column>
            </el-table-column>
          </el-table>
          <el-button type="primary" style="margin-top:10px;"
                     @click="diagInputShow('activity',[{'name':'级别系数','value':'level'},{'name':'参与人数','value':'total_people'}])">
            录入
          </el-button>
          <span class="total_num">总计： {{serviceList.activity_num}}</span>
        </el-card>
        <el-card class="box-card">
          <el-table :data="serviceList.visual_design">
            <el-table-column label="视觉设计">
              <el-table-column prop="level" label="参与人数" width></el-table-column>
              <el-table-column prop="total_people" label="角色排名指数" width></el-table-column>
            </el-table-column>
          </el-table>
          <el-button type="primary" style="margin-top:10px;"
                     @click="diagInputShow('visual_design',[{'name':'角色排名指数','value':'level'},{'name':'参与人数','value':'total_people'}])">
            录入
          </el-button>
          <span class="total_num">总计： {{serviceList.visual_design_num}}</span>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <el-table :data="serviceList.hangar">
            <el-table-column label="个人机库讲解">
              <el-table-column prop="level" label="角色排名指数" width></el-table-column>
              <el-table-column prop="total_people" label="参与人数" width></el-table-column>
            </el-table-column>
          </el-table>
          <el-button type="primary" style="margin-top:10px;"
                     @click="diagInputShow('hangar',[{'name':'角色排名指数','value':'level'},{'name':'参与人数','value':'total_people'}])">
            录入
          </el-button>
          <span class="total_num">总计： {{serviceList.hangar_num}}</span>
        </el-card>
        <el-card class="box-card">
          <el-table :data="serviceList.service">
            <el-table-column label="综合服务">
              <el-table-column prop="overall" label="综合评价得分" width></el-table-column>
              <el-table-column prop="intensity" label="工作强度" width></el-table-column>
            </el-table-column>
          </el-table>
          <el-button type="primary" style="margin-top:10px;"
                     @click="diagInputShow('service',[{'name':'综合评价得分','value':'overall'},{'name':'工作强度','value':'intensity'}])">
            录入
          </el-button>
          <span class="total_num">总计： {{serviceList.service_num}}</span>
        </el-card>
      </el-col>
    </el-row>


    <el-dialog title="活动参展录入" :visible.sync="isActivityInput">
      <el-form :model="InputForm">
        <el-form-item label="级别系数" :label-width="formLabelWidth">
          <el-input v-model="InputForm.level" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="参与人数" :label-width="formLabelWidth">
          <el-input v-model="InputForm.total_people" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addInputFn('activity')">保 存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="机库讲解录入" :visible.sync="isHangarInput">
      <el-form :model="InputForm">
        <el-form-item label="级别系数" :label-width="formLabelWidth">
          <el-input v-model="InputForm.level" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="参与人数" :label-width="formLabelWidth">
          <el-input v-model="InputForm.total_people" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addInputFn('hangar')">保 存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="视觉设计录入" :visible.sync="isVisualDesignInput">
      <el-form :model="InputForm">
        <el-form-item label="角色排名指数" :label-width="formLabelWidth">
          <el-input v-model="InputForm.level" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="参与人数" :label-width="formLabelWidth">
          <el-input v-model="InputForm.total_people" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addInputFn('visual_design')">保 存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="综合服务录入" :visible.sync="isServiceInput">
      <el-form :model="InputForm">
        <el-form-item label="综合评价得分" :label-width="formLabelWidth">
          <el-input v-model="InputForm.overall" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="工作强度" :label-width="formLabelWidth">
          <el-input v-model="InputForm.intensity" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addInputFn('service')">保 存</el-button>
      </div>
    </el-dialog>


    <el-dialog title="录入公共服务" :visible.sync="dialogFormVisible1">
      <el-form :model="diagForm1">
        <div>活动参展</div>
        <el-form-item label="级别系数" :label-width="formLabelWidth">
          <el-input v-model="diagForm1.activity[0].level" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="参数人数" :label-width="formLabelWidth">
          <el-input v-model="diagForm1.activity[0].total_people" autocomplete="off"></el-input>
        </el-form-item>
        <div>个人几率讲解</div>
        <el-form-item label="级别系数" :label-width="formLabelWidth">
          <el-input v-model="diagForm1.hangar[0].level" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色排名" :label-width="formLabelWidth">
          <el-input v-model="diagForm1.hangar[0].total_people" autocomplete="off"></el-input>
        </el-form-item>
        <div>个人视觉设计</div>
        <el-form-item label="参与人数" :label-width="formLabelWidth">
          <el-input v-model="diagForm1.visual_design[0].level" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色排名" :label-width="formLabelWidth">
          <el-input v-model="diagForm1.visual_design[0].total_people" autocomplete="off"></el-input>
        </el-form-item>
        <div>综合服务</div>
        <el-form-item label="综合评价得分" :label-width="formLabelWidth">
          <el-input v-model="diagForm1.service[0].overall" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="工作强度" :label-width="formLabelWidth">
          <el-input v-model="diagForm1.service[0].intensity" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="addServiceFn()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getUserInfo,
    addService,
    getService
  } from "@/api/api";
  import {addPersonalInput, getUserIndex} from "../../api/api";

  export default {
    components: {},
    data() {
      return {
        user_id: null,
        form: {},
        personalList: [],
        dialogFormVisible1: false,
        isInput: false,
        isActivityInput: false,
        isHangarInput: false,
        isVisualDesignInput: false,
        isServiceInput: false,


        serviceList: {
          activity: [],
          activity_num: 0,
          hangar: [],
          hangar_num: 0,
          service: [],
          service_num: 0,
          visual_design: [],
          visual_design_num: 0
        },

        InputForm: {
          rank: 0,
          level: 0,
          topic: null,
          overall: null,
          intensity: null,
          partition: null
        },
        diagForm1: {
          user_id: 1,
          activity: [
            {
              level: 1,
              total_people: 5
            }
          ],
          hangar: [
            {
              level: 1,
              total_people: 5
            }
          ],
          visual_design: [
            {
              level: 1,
              total_people: 5
            }
          ],
          service: [
            {
              overall: 1,
              intensity: 5
            }
          ]
        },

        formLabelWidth: "120px"
      };
    },
    created() {
      this.getUserInfoFn();
      this.getUserIndexFn();
    },
    mounted() {
    },
    watch: {},
    methods: {
      diagInputShow(name, keys) {
        switch (name) {
          case 'activity': {
            this.isActivityInput = true;
            break;
          }
          case 'hangar': {
            this.isHangarInput = true;
            break;
          }
          case 'visual_design': {
            this.isVisualDesignInput = true;
            break;
          }
          case 'service': {
            this.isServiceInput = true;
            break;
          }

        }
        console.log(name)
        console.log(keys)
        this.isInput = true
      },
      async addInputFn(name) {
        switch (name) {
          case 'activity': {
            let formData = {
              level: this.InputForm.level,
              total_people: this.InputForm.total_people,
            }
            let data = await addPersonalInput({
              topic: 'activity',
              data: formData,
            })
            console.log(data)
            if (data.data.code === 200) {
              this.serviceList.activity.push(formData)
              this.serviceList.activity_num = data.data.data
              this.isActivityInput = false;
              this.$message({
                type: "success",
                message: "录入成功"
              });
            } else {
              this.$message.error("添加失败");
            }
            break;
          }
          case 'hangar': {
            let formData = {
              level: this.InputForm.level,
              total_people: this.InputForm.total_people,
            }
            let data = await addPersonalInput({
              topic: 'hangar',
              data: formData
            })
            if (data.data.code === 200) {
              this.serviceList.hangar.push(formData)
              this.serviceList.hangar_num = data.data.data
              this.isHangarInput = false;
              this.$message({
                type: "success",
                message: "录入成功"
              });
            } else {
              this.$message.error("添加失败");
            }
            break;
          }
          case 'visual_design': {
            let formData = {
              level: this.InputForm.level,
              total_people: this.InputForm.total_people,
            }
            let data = await addPersonalInput({
              topic: 'visual_design',
              data: formData
            })
            console.log(data)
            if (data.data.code === 200) {
              this.serviceList.visual_design_num = data.data.data
              this.serviceList.visual_design.push(formData)
              this.isVisualDesignInput = false;
              this.$message({
                type: "success",
                message: "录入成功"
              });
            } else {
              this.$message.error("添加失败");
            }
            break;
          }
          case 'service': {
            let formData = {
              overall: this.InputForm.overall,
              intensity: this.InputForm.intensity,
            }
            let data = await addPersonalInput({
              topic: 'service',
              data: formData
            })
            console.log(data)
            if (data.data.code === 200) {
              this.serviceList.service_num = data.data.data
              this.serviceList.service.push(formData)
              this.isServiceInput = false;
              this.$message({
                type: "success",
                message: "录入成功"
              });
            } else {
              this.$message.error("添加失败");
            }
            break;
          }

        }
      },
      async getUserInfoFn() {
        var data = await getUserInfo();
        console.log(data.data);
        if (data.data.code === 200) {
          this.user_id = data.data.data.id;
        }
      },
      async getUserIndexFn() {
        var data = await getUserIndex();
        console.log(data.data);
        if (data.data.code === 200) {
          this.personalList = data.data.data.personal
          this.serviceList.activity = JSON.parse(this.personalList.service.activity)
          this.serviceList.activity_num = this.personalList.service.activity_num
          this.serviceList.hangar = JSON.parse(this.personalList.service.hangar)
          this.serviceList.hangar_num = this.personalList.service.hangar_num
          this.serviceList.service = JSON.parse(this.personalList.service.service)
          this.serviceList.service_num = this.personalList.service.service_num
          this.serviceList.visual_design = JSON.parse(this.personalList.service.visual_design)
          this.serviceList.visual_design_num = this.personalList.service.visual_design_num
          console.log(this.serviceList)

        }
      },
      diag1Show(type) {
        this.dialogFormVisible1 = true;
        if (type === 1) {
          this.getServiceFn();
        }
      },

      async getServiceFn() {
        var params = {
          user_id: this.user_id
        };
        var data = await getService(params);
        if (data.data.code === 200) {
          this.diagForm1["activity"] = JSON.parse(data.data.data.activity);
          this.diagForm1["hangar"] = JSON.parse(data.data.data.hangar);
          this.diagForm1["service"] = JSON.parse(data.data.data.service);
          this.diagForm1["visual_design"] = JSON.parse(data.data.data.visual_design);
        }
        console.log(data.data.data);
      },
      async addServiceFn() {
        this.diagForm1["user_id"] = this.user_id;
        var data = await addService(this.diagForm1);
        if (data.data.code === 200) {
          this.$message({
            type: "success",
            message: "录入成功"
          });
          this.dialogFormVisible1 = false;
        } else {
          this.$message.error("添加失败");
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .top {
    font-size: 18px;
    padding: 10px;
  }

  .container {
    .grid-content {
      width: calc(100% - 10px);
      margin: auto;
      margin-top: 20px;
    }

    .el-card__body {
      padding: 5px;
    }
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 98%;
    margin: 10px;
  }

  .total_num {
    float: right;
    padding: 15px;
    font-size: 15px;
  }
</style>
